import { Center, Div, H1, Li, P, Section, Ul, VStack } from "@/components/skui";
import { Button, CheckBox, Input, Text } from "@rneui/themed";
import { View } from "react-native";

export default function () {
    return (
        <Center style={{ marginTop: -120 }}>
            <H1 style={{ marginBottom: 20 }}>登录页面</H1>
            <Ul>
                <Li style={{ backgroundColor: "#FFF", margin: -2 }}>
                    <CheckBox
                        checked={true}
                        // onPress={() => setIndex(0)}
                        title="密码登录"
                        checkedIcon="dot-circle-o"
                        uncheckedIcon="circle-o"
                    />
                    <CheckBox
                        checked={true}
                        // onPress={() => setIndex(1)}
                        title="验证码登录"
                        checkedIcon="dot-circle-o"
                        uncheckedIcon="circle-o"
                    />
                </Li>
                <Li style={{ marginTop: 20 }}>
                    <Input
                        placeholder="请输入手机号"
                        leftIcon={{ type: 'material', name: 'phone', color: 'gray' }}
                        // value={email}
                        // onChangeText={setEmail}
                        autoCapitalize="none"
                        keyboardType="phone-pad"
                    />
                </Li>
                <Li>
                    <Input
                        placeholder="请输入密码"
                        leftIcon={{
                            type: 'material-community', name: 'lock', color: 'gray'
                            // , color: '#2089DC' 
                        }}
                        // value={password}
                        // onChangeText={setPassword}
                        secureTextEntry
                    />
                </Li>
                <Li>
                    <Input
                        placeholder="请输入验证码"
                        // value={code}
                        // onChangeText={handleCodeChange}
                        keyboardType="number-pad"
                        maxLength={6} // 设置最大输入长度
                        // inputContainerStyle={styles.inputContainer}
                        placeholderTextColor="gray"
                        leftIcon={{ type: 'material', name: 'confirmation-number', color: 'gray' }}
                        rightIcon={
                            <View>
                                <Button type="clear">验证码</Button>
                            </View>
                        }
                    />
                </Li>
                <Li style={{ margin: 8 }}>
                    <Button containerStyle={{ width: "100%" }}>登 录</Button>
                </Li>
                <Li>
                    <Text style={{ fontWeight: 300 }}>{"  "}备注：如果第一次登录，默认自动注册</Text>
                </Li>
            </Ul>
        </Center>
    )
}